<template>
  <!-- 关联工程 -->
  <el-dialog
    title="关联工程"
    :visible.sync="isShowDialog"
    width="680px">
    <el-table
      v-if="isShowDialog"
      :data="tableList"
      border
      @selection-change="handleSelectionChange"
      row-key="id"
      ref="multipleTable"
      tooltip-effect="dark">
      <el-table-column fixed type="selection" :reserve-selection="true" width="55">
      </el-table-column>
        <el-table-column prop="name" label="工程名称" show-overflow-tooltip min-width="200">
        </el-table-column>
        <el-table-column prop="typeName" label="工程类型" width="120">
        </el-table-column>
        <el-table-column prop="area" label="所属行政区" width="200">
        </el-table-column>
        <el-table-column prop="industryName" label="所属行业" width="120">
        </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="form.page"
      :page-size="form.pageSize"    :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"  :total="form.total">
    </el-pagination>
    <!-- 操作按钮 -->
    <span slot="footer" class="dialog-footer">
      <el-button class="common_btn-white" @click="isShowDialog = false">取消</el-button>
      <el-button class="common_btn-defalut" type="primary" @click="_submitData">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { projectInfoQuery } from '@/services/model/project-info'
import { relProject } from '@/services/model/authority-mgmt'

export default {
  data () {
    return {
      // 当前编辑的数据
      currentRow: {},
      // 是否展示弹窗
      isShowDialog: false,
      // 展示的数据
      tableList: [],
      // 分页参数
      form: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      // 是否正在回显
      echoCount: 0,
      // 已经回显过的数组
      hasEchoList: []
    }
  },
  methods: {
    // 展示弹窗
    async showDialog (row) {
      const projectList = row?.projectList.map(x => x.id) || []
      this.hasEchoList = []
      this.echoCount = 0
      this.form.page = 1
      this.currentRow = {
        projectList,
        userId: row.id,
      }
      await this.queryList()
      this.isShowDialog = true
      this.echoTableCheckStatus()
    },
    // 勾选回显
    echoTableCheckStatus () {
      const projectList = this.currentRow.projectList
      this.$nextTick(() => {
        projectList.map(x => {
          let item = this.tableList.find(w => w.id === x)
          if (item && !this.hasEchoList.includes(item.id)) {
            this.hasEchoList.push(item.id)
            ++this.echoCount
            this.$refs.multipleTable.toggleRowSelection(item, true)
          }
        })
      })
    },
    // 列表勾选
    handleSelectionChange (val) {
      if (this.echoCount === 0) {
        this.currentRow.projectList = val.map(x => x.id)
        this.hasEchoList = Array.from(new Set([...this.hasEchoList, ...val.map(x => x.id)]))
      } else {
        this.echoCount = this.echoCount - 1
      }
    },
    // 查询列表
    async queryList () {
      let { data } = await projectInfoQuery(this.form)
      this.tableList = data?.records || []
      this.form.size = Number(data?.size)
      this.form.total = Number(data?.total)
    },
    // 提交表单
    async _submitData () {
      await relProject(this.currentRow)
      this.$message.success('关联工程已更新')
      this.$emit('update')
      this.isShowDialog = false
    },
    // 当前页码改变
    async handleCurrentChange (val) {
      this.form.page = val
      await this.queryList()
      this.echoTableCheckStatus()
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.queryList()
    },
  }
}
</script>

<style>

</style>
